<template>
	<div class="memberExtract">
		<el-card shadow="hover">
			<div class="member-deal-details mb15">
				<el-form ref="formDataRef" :inline="true" :model="formData" label-width="70px" class="demo-form-inline">
					<el-row>
						<el-col :span="24">
							<el-form-item label="" style="width: 100%">
								<el-button type="success" @click="onAdd">添加提现</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item prop="add" label="类型" style="width: 100%">
								<el-select v-model="formData.add" @change="searchFun()" style="width: 100%">
									<el-option v-for="(item, index) in extractType" :key="index" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item prop="moneyStatus" label="状态" style="width: 100%">
								<el-select v-model="formData.moneyStatus" @change="searchFun()" style="width: 100%">
									<el-option v-for="(item, index) in extractMoneyStatus" :key="index" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item prop="project" label="项目" style="width: 100%">
								<el-select v-model="formData.project" @change="searchFun()" style="width: 100%">
									<el-option v-for="(item, index) in extractProject" :key="index" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item prop="createTime" label="创建时间" style="width: 100%">
								<el-date-picker
									style="width: 100%"
									value-format="YYYY-MM-DD"
									v-model="formData.createTime"
									type="date"
									placeholder="选择日期"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item>
								<div style="padding-left: 10px">
									<el-button type="primary" @click="searchFun">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="userId" label="会员id"></el-table-column>
				<el-table-column prop="email" label="注册邮箱"></el-table-column>
				<el-table-column prop="money" label="提现金额">
					<template #default="scope">
						<span>{{ scope.row.addSub === 1 ? '+ ' + scope.row.money : '- ' + scope.row.money }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="email" label="渠道/账号"></el-table-column>
				<el-table-column prop="createTime" label="申请时间" width="160">
					<template #default="scope">
						<span>{{ $filters.timeFormat(scope.row.createTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="moneyStatus" label="状态">
					<template #default="scope">
						<span>{{ getStateFormatZh(extractMoneyStatus, deepCopy(scope.row.moneyStatus)) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="note" label="备注"></el-table-column>
				<el-table-column label="操作" width="120px" align="center" fixed="right">
					<template #default="scope">
						<el-button text size="small" @click="onOpenDialog(scope.row)" type="primary">查看</el-button>
						<el-button v-if="scope.row.moneyStatus === 2" text size="small" @click="onOpenAuditModal(scope.row)" type="success">审核</el-button>
						<el-button v-if="scope.row.moneyStatus === 4" text size="small" @click="toDetail(scope.row)" type="danger">取消</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="ipage.current"
				background
				v-model:page-size="ipage.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="ipage.total"
			>
			</el-pagination>
		</el-card>
		<el-dialog title="提现详情" v-model="isShowDialog" width="769px">
			<Detail :extractType="extractType" :extractMoneyStatus="extractMoneyStatus" :extractProject="extractProject" :detailForm="detailForm" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确认</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="添加提现" v-model="isShowAddDialog" width="769px">
			<AddExtract ref="addExtracRef" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancelAdd" size="default">取消</el-button>
					<el-button type="primary" @click="onSubmitAdd(addExtracRef)" size="default">确认</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="提交审核" v-model="isShowAuditDialog" width="769px">
			<div class="andit-body">
				<el-form inline ref="updateFormRef" :model="updateAudit" :rules="updateRules" label-width="80px">
					<el-row>
						<el-col :span="24">
							<el-form-item prop="note" label="备注" style="width: 100%">
								<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" v-model="updateAudit.note" clearable style="width: 100%"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<!-- <el-input v-model="note" :rows="3" type="textarea" clearable style="width: 100%" placeholder="请输入备注"></el-input> -->
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="success" @click="onSubmitudit({ updateFormRef, state: 2 })" size="default">通过审核</el-button>
					<el-button type="danger" @click="onSubmitudit({ updateFormRef, state: 5 })" size="default">拒绝通过</el-button>
					<el-button @click="onCloseAndit" size="default">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="MemberExtract">
import Detail from './component/Detail.vue';
import AddExtract from './component/AddExtract.vue';
import { useInit, useEdit, useAdd } from './hook';
import { getStateFormatZh } from '/@/utils/commonRequest';
import { deepCopy } from '/@/utils';
import { extractType, extractMoneyStatus, extractProject } from '/@/stores/dic';

const addExtracRef = ref();
const { ipage, handleGetMoneyList, tableData, formData, isShowDialog, onOpenDialog, detailForm, onCancel, onSubmit } = useInit();
const { isShowAddDialog, onAdd, onCancelAdd, onSubmitAdd } = useAdd();
const { updateRules, updateAudit, onOpenAuditModal, onCloseAndit, isShowAuditDialog, onSubmitudit } = useEdit(handleGetMoneyList);

const searchFun = () => {};
const updateFormRef = ref();
const formDataRef = ref();
const resetForm = () => {
	formDataRef.value.resetFields();
};

// 分页改变
const onHandleSizeChange = (val) => {
	ipage.value.pageSize = val;
	handleGetMoneyList();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	ipage.value.current = val;
	handleGetMoneyList();
};

onMounted(() => {
	handleGetMoneyList();
});
</script>
<style lang="scss" scoped></style>
